<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:p="http://primefaces.org/ui"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core">

    <c:if test="#{pCItemMenu.consultarPermisos().ver}">
        <ui:param name="nombreparam" value="especial" />
        <ui:param name="duracionparam" value="7000" />
        <ui:param name="efectshowparam" value="fade" />
        <ui:param name="efecthideparam" value="fade" />

        <h:panelGroup layout="block" id="divTabla#{nombreparam}" styleClass="delistar-js">
            <h:form id="formTabla#{nombreparam}">
                <p:commandButton style="display: none;"/>
                <p:dataTable  var="item"
                              value="#{pCEspecial.listado}"
                              rows="5"
                              paginator="true"
                              paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                              lazy="true"
                              resizableColumns="true"
                              paginatorAlwaysVisible="false"
                              emptyMessage="No hay #{lenguajeBean.devolverStringPlural(nombreparam)} que mostrar."
                              id="tableModel#{nombreparam}"> 
                    <f:facet name="header">
                        <h:outputText value="Listado de Especiales"
                                      style="font-size: 18px;" rendered="#{sesion.mostrarTituloTabla}"/>
                    </f:facet>
                    <p:column headerText="Descripción Corta" sortBy="#{item.descripcionCorta}"  rendered="#{pCEspecial.getColVisible('descripcionCorta')}" >
                        <h:outputText value="#{item.descripcionCorta}"/>
                    </p:column>
                    <p:column headerText="Precio" sortBy="#{item.precio}" rendered="#{pCEspecial.getColVisible('precio')}">
                        <h:outputText value="#{item.precio}"/>
                    </p:column>
                    <p:column headerText="Descripciòn Especial" sortBy="#{item.descripcionEspecial}" rendered="#{pCEspecial.getColVisible('descripcionEspecial')}">
                        <h:outputText value="#{item.descripcionEspecial}"/>
                    </p:column>
                    <p:column headerText="Categoría" sortBy="#{item.idCategoria}" rendered="#{pCEspecial.getColVisible('categoria')}">
                        <h:outputText value="#{pCItemMenu.getNombreCategoria(item.idCategoria)}"/>
                    </p:column>

                    <p:column width="32">
                        <p:commandButton icon="ui-icon-circle-plus"
                                         actionListener="#{pCPedido.agregarAPedido(item)}"
                                         process="@this" update=":formdatapedido:pedido :formdatapedido:costo_pedido"/>
                    </p:column>

                </p:dataTable>
            </h:form>
        </h:panelGroup>
        <h:outputScript>
            function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
        </h:outputScript>
    </c:if>
</ui:component>
